<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <!-- Right Sidebar -->
      <div class="col-12">
        <div class="email-leftbar card" style="position: fixed;">
          <div class="mail-list">
            <a href="javascript: void(0);">
              <i class="mdi mdi-diamond-stone mr-2"></i>信源状态
            </a>
            <a href="javascript: void(0);">
              <i class="mdi mdi-email-outline mr-2"></i>数据采集
            </a>
            <a href="javascript: void(0);">
              <i class="mdi mdi-star-outline mr-2"></i>客户关系
            </a>
            <a href="javascript: void(0);">
              <i class="mdi mdi-file-outline mr-2"></i>计算资源
            </a>
            <a href="javascript: void(0);">
              <i class="mdi mdi-email-check-outline mr-2"></i>系统接口
            </a>
            <a href="javascript: void(0);">
              <i class="mdi mdi-trash-can-outline mr-2"></i>系统日志
            </a>
            <a href="javascript: void(0);">
              <i class="mdi mdi-trash-can-outline mr-2"></i>标签标记
            </a>
            <a href="javascript: void(0);">
              <i class="mdi mdi-trash-can-outline mr-2"></i>数据仓库
            </a>
          </div>
        </div>
        <div class="email-rightbar mb-3">
          <!-- 信源状态 -->
          <div>
            <div class="card">
              <div class="card-body">
                <div>
                  <h4 class="card-title">信源状态</h4>
                  <p class="card-title-desc">当前信源状态分布</p>
                  <b-tabs content-class="p-3 text-muted">
                    <b-tab active class="border-0">
                      <template v-slot:title>
                        <span class="d-inline-block d-sm-none">
                          <i class="fas fa-home"></i>
                        </span>
                        <span class="d-none d-sm-inline-block">有效总量</span>
                      </template>
                      <div class="col-12">
                        <div class="row">
                          <div class="col-xl-3 col-md-4 col-sm-6" v-for="(item,index) in dataAcquisitionList" :key="index">
                            <div class="p-4 text-center">
                              <h5 class="font-size-15 mb-3">
                                <i class="ri-mail-forbid-line" style="vertical-align: text-bottom;margin-right: 3px;"></i>{{item}}
                              </h5>
                              <div class="text-center">
                                0
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </b-tab>
                    <b-tab>
                      <template v-slot:title>
                        <span class="d-inline-block d-sm-none">
                          <i class="far fa-user"></i>
                        </span>
                        <span class="d-none d-sm-inline-block">失效总量</span>
                      </template>
                      <div class="col-12">
                        <div class="row">
                          <div class="col-xl-3 col-md-4 col-sm-6" v-for="(item,index) in dataAcquisitionList" :key="index">
                            <div class="p-4 text-center">
                              <h5 class="font-size-15 mb-3">
                                <i class="ri-mail-forbid-line" style="vertical-align: text-bottom;margin-right: 3px;"></i>{{item}}
                              </h5>
                              <div class="text-center">
                                1
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </b-tab>
                    <b-tab>
                      <template v-slot:title>
                        <span class="d-inline-block d-sm-none">
                          <i class="far fa-envelope"></i>
                        </span>
                        <span class="d-none d-sm-inline-block">3日新增</span>
                      </template>
                      <div class="col-12">
                        <div class="row">
                          <div class="col-xl-3 col-md-4 col-sm-6" v-for="(item,index) in dataAcquisitionList" :key="index">
                            <div class="p-4 text-center">
                              <h5 class="font-size-15 mb-3">
                                <i class="ri-mail-forbid-line" style="vertical-align: text-bottom;margin-right: 3px;"></i>{{item}}
                              </h5>
                              <div class="text-center">
                                2
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </b-tab>
                  </b-tabs>
                  <!-- <table class="table table-bordered mb-0">
                    <thead>
                      <tr>
                        <th colspan="11">当前有效总数量<span>22,321,453</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td v-for="(item,idx) in dataAcquisitionList" :key="idx">{{item}}</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                    <thead>
                      <tr>
                        <th colspan="11">当前失效总数量<span>22,321,453</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td v-for="(item,idx) in dataAcquisitionList" :key="idx">{{item}}</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                    <thead>
                      <tr>
                        <th colspan="11">3日内新增信源数量<span>22,321,453</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td v-for="(item,idx) in dataAcquisitionList" :key="idx">{{item}}</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table> -->
                </div>
              </div>
            </div>
          </div>
          <!-- 数据采集 -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="table-responsive">
                  <h4 class="card-title">数据采集</h4>
                  <table class="table table-bordered mb-0">
                    <thead>
                      <tr>
                        <th colspan="11">今日数据采集<span>22,321,453</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td v-for="(item,idx) in dataAcquisitionList" :key="idx">{{item}}</td>
                      </tr>
                      <tr>
                        <td>1万</td>
                        <td>2万</td>
                        <td>3万</td>
                        <td>4万</td>
                        <td>5万</td>
                        <td>6万</td>
                        <td>7万</td>
                        <td>8万</td>
                        <td>9万</td>
                        <td>10万</td>
                        <td>11万</td>
                      </tr>
                    </tbody>
                    <thead>
                      <tr>
                        <th colspan="11">今日数据采集错误量<span>321,453</span></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td v-for="(item,idx) in dataAcquisitionList" :key="idx">{{item}}</td>
                      </tr>
                      <tr>
                        <td>1万</td>
                        <td>2万</td>
                        <td>3万</td>
                        <td>4万</td>
                        <td>5万</td>
                        <td>6万</td>
                        <td>7万</td>
                        <td>8万</td>
                        <td>9万</td>
                        <td>10万</td>
                        <td>11万</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div style="display:flex;">
                  <div class="col-xl-6">
                    <div>数据采集量排名</div>
                    <table class="table table-bordered mb-0">
                      <tbody>
                        <tr>
                          <td>数据类型</td>
                          <td>网站栏目或媒体账号</td>
                          <td>采集数量</td>
                        </tr>
                        <tr v-for="(item,index) in dataAcquisitionList" :key="index">
                          <td>{{item}}</td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="col-xl-6">
                    <div>数据采集错误量排名</div>
                    <table class="table table-bordered mb-0">
                      <tbody>
                        <tr>
                          <td>数据类型</td>
                          <td>网站栏目或媒体账号</td>
                          <td>采集数量</td>
                        </tr>
                        <tr v-for="(item,index) in dataAcquisitionList" :key="index">
                          <td>{{item}}</td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 客户关系 -->
          <div>
            <div class="card">
              <div class="card-body">
                <h4 class="card-title" style="padding:0 12px;">客户关系</h4>
                <div style="padding:0 12px;">目前本系统已服务<span style="margin:0 5px;">xx</span>个客户</div>
                <div style="display:flex;">
                  <div class="col-xl-6">
                    <div>信源类型与客户数量排名</div>
                    <table class="table table-bordered mb-0">
                      <tbody>
                        <tr>
                          <td>信源类型</td>
                          <td>对应客户数量</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="col-xl-6">
                    <div>信源与客户数量排名</div>
                    <table class="table table-bordered mb-0">
                      <tbody>
                        <tr>
                          <td>信源名称</td>
                          <td>对应客户数量</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="table-responsive" style="margin-bottom:0;margin-top:1rem;">
                  <div>应用系统与客户数量排名</div>
                  <table class="table table-bordered mb-0">
                    <tbody>
                      <tr>
                        <td>应用系统名称</td>
                        <td>客户名称</td>
                        <td>使用总次数</td>
                        <td>3内使用次数</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- 计算资源 -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="table-responsive">
                  <div>当前计算资源状态分布</div>
                  <table class="table table-bordered mb-0">
                    <tbody>
                      <tr>
                        <td>服务器类型</td>
                        <td>服务器数量</td>
                        <td>活动状态</td>
                        <td>失效状态</td>
                      </tr>
                      <tr v-for="(item,index) in serverList" :key="index">
                        <td>{{item.type}}</td>
                        <td>{{item.num}}</td>
                        <td>{{item.activityState}}</td>
                        <td>{{item.invalidState}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="table-responsive">
                  <div>满载机器列表清单</div>
                  <table class="table table-bordered mb-0">
                    <tbody>
                      <tr>
                        <td>服务器IP</td>
                        <td>应用服务数</td>
                        <td>磁盘</td>
                        <td>内存</td>
                        <td>cpu</td>
                        <td>进程数</td>
                        <td>文件句柄数</td>
                        <td>网络链接数</td>
                      </tr>
                      <tr v-for="(item,index) in machineList" :key="index">
                        <td>{{item.Ip}}</td>
                        <td>{{item.applicationNum}}</td>
                        <td>{{item.disk}}</td>
                        <td>{{item.memory}}</td>
                        <td>{{item.cpu}}</td>
                        <td>{{item.processesNum}}</td>
                        <td>{{item.fileHandlesNum}}</td>
                        <td>{{item.networkLinksNum}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="table-responsive">
                  <div>当前计算资源状态分布</div>
                  <table class="table table-bordered mb-0">
                    <thead>
                      <tr>
                        <th colspan="4">正式环境共有<span>xx</span>台应用服务器，测试环境共有<span>xx</span>台应用服务器。</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>服务器类型</td>
                        <td>正式环境(正常|失效)</td>
                        <td>测试环境(正常|失效)</td>
                      </tr>
                      <tr v-for="(item,index) in databaseList" :key="index">
                        <td>{{item.type}}</td>
                        <td>{{item.formal}}</td>
                        <td>{{item.test}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- 系统接口 -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="table-responsive">
                  <h4 class="card-title">系统接口</h4>
                  <p class="card-title-desc">外部系统接口调用状态</p>
                  <table class="table table-bordered mb-0">
                    <thead>
                      <tr>
                        <th colspan="11">系统接口有<span>xx</span>个，数据传输 270.5G，异常次数 1024 次</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>接口总线</td>
                        <td>接口名称</td>
                        <td>调用次数</td>
                        <td>数据传输</td>
                        <td>调用应用系统</td>
                        <td>对应客户</td>
                        <td>异常次数</td>
                      </tr>
                      <tr>
                        <td>媒体资讯</td>
                        <td>资讯列表</td>
                        <td>242,134,135</td>
                        <td>12.4G</td>
                        <td>3</td>
                        <td>3</td>
                        <td>400</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="card-title-desc" style="margin-bottom:12px;margin-top:24px;">外部系统接口调用状态</div>
                  <table class="table table-bordered mb-0">
                    <thead>
                      <tr>
                        <th colspan="11">系统接口有<span>xx</span>个，数据传输 270.5G，异常次数 1024 次</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>接口总线</td>
                        <td>接口名称</td>
                        <td>调用次数</td>
                        <td>数据传输</td>
                        <td>调用应用系统</td>
                        <td>关联客户</td>
                      </tr>
                      <tr>
                        <td>媒体资讯</td>
                        <td>资讯列表</td>
                        <td>242,134,135</td>
                        <td>12.4G</td>
                        <td>3</td>
                        <td>3</td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- 系统日志 -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="table-responsive">
                  <h4 class="card-title">系统日志</h4>
                </div>
                <div style="display:flex;">
                  <div class="col-xl-6">
                    <table class="table table-bordered mb-0">
                      <tbody>
                        <tr>
                          <td>日志错误类型</td>
                          <td>日志储存容量</td>
                          <td>日志储存数量</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="col-xl-6">
                    <table class="table table-bordered mb-0">
                      <tbody>
                        <tr>
                          <td>日志超时类型</td>
                          <td>日志储存容量</td>
                          <td>日志储存数量</td>
                        </tr>
                        <tr>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 标记标签 -->
          <div>
            <div class="card">
              <div class="card-body">
                <div class="table-responsive">
                  <h4 class="card-title">标记标签</h4>
                </div>
                <div class="row">
                  <div class="col-xl-12" style="display:flex;margin-bottom:24px;">
                    <div class="col-xl-6">
                      <table class="table table-bordered mb-0">
                        <tbody>
                          <tr>
                            <td>标签分组</td>
                            <td>标签数量</td>
                          </tr>
                          <tr>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="col-xl-6">
                      <table class="table table-bordered mb-0">
                        <tbody>
                          <tr>
                            <td>标签名称</td>
                            <td>标记数量</td>
                          </tr>
                          <tr>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="col-xl-12" style="display:flex;">
                    <div class="col-xl-6">
                      <table class="table table-bordered mb-0">
                        <tbody>
                          <tr>
                            <td>同条数据未标记标签</td>
                            <td>未标记数量</td>
                          </tr>
                          <tr>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="col-xl-6">
                      <table class="table table-bordered mb-0">
                        <tbody>
                          <tr>
                            <td>标记出错标签</td>
                            <td>标记出错数量</td>
                          </tr>
                          <tr>
                            <td></td>
                            <td></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 数据仓库 -->
          <div>
            <div class="card">
              <div class="card-body pt-0">
                <div style="padding: 1.25rem 12px;">正式运行环境共有 10台数据服务器，磁盘占用200g，内存占用 100G。</div>
                <div class="table-responsive">
                  <b-table
                    class="table-centered text-left"
                    :items="ordersDataFormal"
                    :fields="fields"
                    responsive="sm"
                    :per-page="perPage"
                    :current-page="currentPage"
                    @filtered="onFiltered"
                  >
                    <template v-slot:cell(seventh)="row">
                      <div class="pointer">{{ row.value }}</div>
                    </template>
                  </b-table>
                </div>
                <div style="padding: 1.25rem 12px;">测试运行环境共有 10台数据服务器，磁盘占用200g，内存占用 100G。</div>
                <div class="table-responsive">
                  <b-table
                    class="table-centered text-left"
                    :items="ordersDataTest"
                    :fields="fields"
                    responsive="sm"
                    :per-page="perPage"
                    :current-page="currentPage"
                    @filtered="onFiltered"
                  >
                    <template v-slot:cell(seventh)="row">
                      <div class="pointer">{{ row.value }}</div>
                    </template>
                  </b-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data () {
    return {
      items: [
        {
          text: "系统首页",
          url: "/dashboard",
        },{
          text: "系统运行报告",
          url: "/dashboard/operationReport",
        },{
          text: "2022-2-2运行状态报告",
          url: "/",
        }
      ],
      dataAcquisitionList: ['资讯','招投标','搜索引擎','短视频','在线旅游','自媒体','招聘','政策','证券','法律','知产'],
      // 服务器列表
      serverList: [
        {
          type: '真实服务器',
          num: 6,
          activityState: 6,
          invalidState: 0,
        },{
          type: '虚拟服务器',
          num: 48,
          activityState: 45,
          invalidState: 3,
        },{
          type: '应用服务器',
          num: 133,
          activityState: 125,
          invalidState: 8,
        },
      ],
      // 满载机器列表清单
      machineList: [
        {
          Ip: '192.168.71.23',
          applicationNum: 6,
          disk: '60%',
          memory: '89%',
          cpu: '10%',
          processesNum: 344,
          fileHandlesNum: 32546,
          networkLinksNum: 545,
        }
      ],
      // 
      databaseList: [
        {
          type: 'MySQL',
          formal: '6|0',
          test: '6|0'
        },{
          type: 'kafak',
          formal: '2|0',
          test: '2|0'
        },{
          type: 'redis',
          formal: '1|0',
          test: '1|0'
        },{
          type: 'jar服务',
          formal: '6|0',
          test: '6|0'
        },{
          type: 'ES',
          formal: '2|0',
          test: '2|0'
        },{
          type: 'mongodb',
          formal: '1|0',
          test: '1|0'
        },{
          type: 'rabbitMQ',
          formal: '2|0',
          test: '6|0'
        }
      ],
      // 数据仓库
      ordersDataFormal: [
        {
          server: "192.168.71.22",
          type: "MySQL",
          queue: '18 个',
          storageObject: '200 张',
          num: "100万|200G",
          store: "1200条",
          increment: "15万",
          memoryOccupation: '200G',
          maxNum: 1203,
        },
      ],
      ordersDataTest: [
        {
          server: "192.168.71.22",
          type: "MySQL",
          queue: '18 个',
          storageObject: '200 张',
          num: "100万|200G",
          store: "1200条",
          increment: "15万",
          memoryOccupation: '200G',
          maxNum: 1203,
        },
      ],
      currentPage: 1,
      perPage: 10,
      pageOptions: [10, 25, 50, 100],
      fields: [
        { key: "server", label: "数据服务器" },
        { key: "type", label: "数据服务类型" },
        { key: "queue", label: "数据库/队列" },
        { key: "storageObject", label: "数据表/储存对象" },
        { key: "num", label: "储存容量|数量" },
        { key: "store", label: "每秒峰值储存" },
        { key: "increment", label: "相比昨日增量" },
        { key: "memoryOccupation", label: "内存占用" },
        { key: "maxNum", label: "最高连接数" },
      ],
    }
  },
  computed: {
    rows() {
      return this.ordersDataFormal.length;
    },
  },
  methods: {
    onFiltered() {
      this.currentPage = 1;
    },
  }
}
</script>
<style lang="scss" scoped>
table{
  text-align: center;
}
.table-responsive{
  padding: 0 12px;
}
thead{
  span{
    margin: 0 5px;
  }
}
</style>
